<template>
    <div class="wrapper" style="position: relative">
        <img :src="imgUrl" class="img"/>
        <svg class="closeIcon" aria-hidden="true" @click="deletePic">
            <use xlink:href="#icon-photo-close"></use>
        </svg>
    </div>
</template>

<script type="text/ecmascript-6">
    // import Public from '@/assets/js/public';

    export default {
        name: 'item-img-loader',

        data() {
            return {};
        },
        props: {
            imgUrl: {
                required: true,
                type: String
            },
            index: {
                required: true,
                type: Number
            }
        },

        components: {},

        methods: {
            deletePic() {
                this.$emit('onDeleteClick', this.index);
            }
        },
        computed: {},
        watch: {
            // 监听具体数据变化，并做相应的处理
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import '~assets/main.styl';
    .flex-r
        flex-x()

    .flex-c
        flex-y()

    .center
        flex-center()

    .divider
        divider()

    .space
        space()

    .img
        width 100%
        height 100%
        border-radius vw(8)
    .closeIcon
        fill: gray6
        background-color grayF
        border-radius 50%
        width 6vw
        height 6vw
        position absolute
        top -3vw
        right -3vw
</style>
